import { Button, Form, Input, Select, message, Switch } from "antd";
import React, { Component } from "react";
import { coursePost } from "@/api/course";
import { courseGet } from "../../../api/course";

const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 14,
  },
};
class CategoryFrom extends Component {
  formRef = React.createRef();
  state = {
    courseList: [],
  };
  componentDidMount = () => {
    courseGet(true).then((res) => {
      this.setState({
        courseList: res.data.results,
      });
    });
  };
  onFinish = (values) => {
    console.log(values);
    coursePost(values);
    message.success("添加成功");
    this.props.handleFinish(false);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  render() {
    return (
      <div style={{ borderTop: "1px solid #eee", paddingTop: "20px" }}>
        <Form
          {...layout}
          ref={this.formRef}
          name="control-ref"
          onFinish={this.onFinish}
          initialValues={{
            grounding: false,
          }}
        >
          <Form.Item
            name="name"
            label="类目名称"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="parent"
            label="父级目录"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select placeholder="请选择父级目录" allowClear>
              <Option value="0-0">顶级目录</Option>
              {this.state.courseList.map((item) => {
                return (
                  <Option value={item.name} key={item.objectId}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            name="grounding"
            label="是否上架"
            valuePropName="checked"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Switch />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button
              htmlType="button"
              onClick={this.onReset}
              style={{ marginLeft: "10px" }}
            >
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default CategoryFrom;
